import { memo, useState } from 'react'
import { useRequest } from 'ahooks'
import { api_getAnswerList } from '@/api'
import { useParams } from 'react-router-dom'
import { Spin, Typography, Table, Pagination } from 'antd'
import useGetComponentInfo from '@/hooks/useGetComponentInfo'
import { ComponentInfoType } from '@/store/modules/componentsReducer'

const { Title } = Typography

type PropsType = {
  selectedComponentId: string
  setSelectedComponentId: (id: string) => void
  setSelectedComponentType: (type: string) => void
}

const PageStat = memo((props: PropsType) => {
  const { selectedComponentId, setSelectedComponentId, setSelectedComponentType } = props

  const { id = '' } = useParams()

  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(5)
  const [total, setTotal] = useState(0)
  const [list, setList] = useState([])
  const { loading } = useRequest(async () => await api_getAnswerList(id, { page, pageSize }), {
    refreshDeps: [id, page, pageSize],
    onSuccess: data => {
      setTotal(data?.total)
      setList(data?.list)
    },
  })

  const { componentList } = useGetComponentInfo()
  const columns = componentList
    .filter((item: ComponentInfoType) => {
      const excludeTypes = ['questionInfo', 'questionTitle', 'questionParagraph']
      return !excludeTypes.includes(item.type)
    })
    .map((item: ComponentInfoType) => {
      const { fe_id, title, props = {}, type } = item
      const colTitle = props!.title || title

      return {
        dataIndex: fe_id,
        title: (
          <div
            style={{ cursor: 'pointer' }}
            onClick={() => {
              setSelectedComponentId(fe_id)
              setSelectedComponentType(type)
            }}
          >
            {fe_id === selectedComponentId ? (
              <span style={{ color: '#1890ff' }}>{colTitle}</span>
            ) : (
              colTitle
            )}
          </div>
        ),
      }
    })

  const handleSizeChange = (page: number, pageSize: number) => {
    setPage(page)
    setPageSize(pageSize)
  }

  const TableElem = () => (
    <>
      <Table
        rowKey={(record: any) => record._id}
        columns={columns}
        dataSource={list}
        pagination={false}
      ></Table>
      <div style={{ textAlign: 'center', marginTop: '20px' }}>
        <Pagination
          showTotal={total => `共 ${total} 条数据`}
          pageSizeOptions={['5', '10', '20']}
          showSizeChanger
          total={total}
          pageSize={pageSize}
          current={page}
          onChange={handleSizeChange}
        />
      </div>
    </>
  )

  return (
    <div>
      {loading && (
        <div
          style={{
            textAlign: 'center',
            marginTop: '100px',
          }}
        >
          <Spin></Spin>
        </div>
      )}
      {!loading && (
        <>
          <Title level={3}>答卷数量：{total}</Title>
          <TableElem />
        </>
      )}
    </div>
  )
})

export default PageStat
